<template>
  <div class="swiperBox">

      <div class="swiper-container allBanner" v-if="data.static==1" id="swipera">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in data.data">
            <span @click="closeSwiper"><img :src="item.image"/></span>
            <i @click="del(item.id)" class="del"></i>
          </div>
        </div>
      </div>

      <div class="swiper-container allBanner" v-if="data.static==2" id="swipera">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in data.data">
            <span @click="closeSwiper"><img :src="item.image"/></span>
          </div>
        </div>
      </div>

  </div>
</template>

<script>
import {Delete} from '@/config/api.js'
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import { mapState } from 'vuex'
import $ from 'jquery'

export default {
  name: 'header',
  props:['data'],
  data() {
    return {
      title: ''
    }
  },
  computed: {
    ...mapState({
      loading: state => state.loading,
      swiperData: state => state.swiperData
    })
  },
  mounted(){
      let num=this.data.num
      var wh = $(window).height();
      var ww = $(window).width();
      $('.swiperBox .swiper-slide span').css('height',wh)
      $('.swiperBox .swiper-slide span').css('width',ww)
      setTimeout(function () {
        let swiperB = new Swiper('#swipera', {
          loop : false,
          initialSlide :num,
          paginationClickable: true
        });
      }, 0)
  },
  methods:{
    del(id){
      this.$emit('delImg',id);
    },
    closeSwiper(){
      this.$emit('close');
    }
  }
}

</script>
